<template>
  <div>
    <el-card>
            <div slot="header">
              {{shopInfo.sellName}} <span class="el-icon-arrow-right"></span>
            </div>
            <ul class="order-detail-list">
              <li v-for="item in productList" :key="item.productId" class="order-detail-item">
                <el-row>
                  <el-col :span="2">
                    <el-avatar shape="square" :src="item.foodUrl"></el-avatar>
                  </el-col>
                  <el-col :span="22">
                    <span style="float:right">￥{{item.foodPrice}}</span>
                    <span style="float:right;color:#666;margin-right:20px">X {{item.amount}}</span>
                    <h4>{{item.foodName}}</h4>

                  </el-col>
                </el-row>
              </li>
              <el-divider></el-divider>
              <li class="order-detail-item">
                <el-row>
                  <el-col :span="2">
                    <el-tag size="medium" effect="dark"> <span class="el-icon-truck"></span> 配送费</el-tag>
                  </el-col>
                  <el-col :span="22">
                   
                    <span style="float:right">￥{{shopInfo.deliveryFee}}</span> 
                    <span style="float:right;color:#666;margin-right:20px">X 1</span>
                  </el-col>
                </el-row>
              </li>
              <li class="order-detail-item">
               <el-row>
                  <el-col :span="2">
                    <el-tag size="medium" type="warning"> <span class="el-icon-money"></span> 实付</el-tag>
                  </el-col>
                  <el-col :span="22">
                    <span style="float:right">￥{{getTotalAmount()+shopInfo.deliveryFee}}</span>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </el-card>
  </div>
</template>

<script>
import productService from '../../service/ProductService'
export default {
  props: ['shopInfo', 'productList'],
  data () {
    return {}
  },
  methods: {
  
    getTotalAmount () {
      return productService.calcTotalAmount(this.productList)
    }
  }
}
</script>

<style lang="less" scoped>
  .order-detail-item {
    margin-bottom: 20px;
    h4 {
      margin: 0;
      font-size: 14px;
    }
    .spec-name {
      font-size: 12px;
    }
  }
</style>
